<template>
  <div>
    <main>
      <div class="table">
        <h1>电影信息表</h1>
        <ul class="title">
          <li>
            <span class="selected-all" @click="selectAll">All</span>
            <span v-for="item of titles" :key="item"> {{ item }}</span>
          </li>
        </ul>
        <ul id="tbody" class="tbody">
          <li
            v-for="(item, index) of movies"
            :key="index"
            @click="getClickNo(index)"
            :class="{ changeColorNo: item.status }"
          >
            <span class="col-1"
              ><label id="label" :for="'film' + index"
                ><input
                  type="checkbox"
                  v-model="item.status"
                  class="film-option"
                  :id="'film' + index" /></label
            ></span>
            <span>{{ index + 1 }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.desc }}</span>
            <span
              ><el-rate
                v-model="item.score"
                disabled
                show-text
                text-color="#8076a3"
                void-icon-class="icon-rate-face-off"
                :texts="['烂片', '还行', '一般', '佳作', '神作']"
                :colors="['#70887d', '#bec936', '#20894d']"
              >
              </el-rate
            ></span>
            <span
              ><input
                value="修改"
                type="button"
                class="button"
                @click="editFilmInfo(index)" />
              <input
                value="删除"
                @click="onDelete(index)"
                type="button"
                class="button"
            /></span>
          </li>
        </ul>
      </div>
    </main>
    <el-dialog
      title="修改信息框"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="dialog-body">
        <span>电影名称：</span>
        <el-input placeholder="电影名称" v-model="editFilmName" clearable>
        </el-input>
        <span>电影信息：</span>
        <el-input placeholder="电影信息" v-model="editFilmDesc" clearable>
        </el-input>
        <span class="film-ratings">电影评分：</span>
        <el-slider
          v-model="editFilmScore"
          :format-tooltip="formatTooltip"
        ></el-slider>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="padding: 12px 30px"
          @click="saveFilmInfo"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "first-solution",
  data() {
    return {
      movieList: [],
      titles: ["编号", "电影名", "电影详情", "电影评分", "操作"],
      start: 0,

      // 每次刷新数据量
      section: 15,
      value: 60,
      dialogVisible: false,
      end: 15,
      editFilmName: "",
      editFilmDesc: "",
      currentFilmNo: 0,
      editFilmScore: 3,
      movies: [],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.debounce(this.handleScroll, 200));
    this.movieList = this.$generateArray();


    // 引用类型使用slice进行浅拷贝， 方便对数据进行更改
    this.movies = this.movieList.slice(this.start, this.end);
    console.log(this.$generateArray());
    console.log(this.movieList.length);
  },
  methods: {
    // 删除相关影视信息
    onDelete(index) {
      this.movies.splice(index, 1);
      this.movieList.splice(index, 1);
    },
    selectAll() {
      this.movieList.forEach(function (item, index, array) {
        item.status = !item.status;
      });
    },
    // 保存更改后的电影信息
    saveFilmInfo() {
      this.dialogVisible = false;
      this.movieList[this.currentFilmNo].name = this.editFilmName;
      this.movieList[this.currentFilmNo].desc = this.editFilmDesc;
      this.movieList[this.currentFilmNo].score =
        parseInt(this.editFilmScore / 25) + 1;
      this.$swal("Success", "信息保存成功", "success");
    },
    // 调节slider的起始终止值
    formatTooltip(val) {
      return parseInt(val / 25) + 1;
    },
    // 弹出确认关闭的提示框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          console.log("点击确定离开弹窗触发");
          done();
        })
        .catch((_) => {
          console.log("点击×或取消时触发");
        });
    },
    // 修改影视信息
    editFilmInfo(index) {
      this.dialogVisible = true;
      this.currentFilmNo = index;
      this.editFilmName = this.movieList[index].name;
      this.editFilmDesc = this.movieList[index].desc;
      this.editFilmScore = (this.movieList[index].score - 1) * 25;
    },
    // 获取点击的信息编号
    getClickNo(num) {
      this.movieList[num].status = !this.movieList[num].status;
      console.log(this.movieList[num]);
      console.log(this.movies[num]);
    },
    // 使用函数防抖防止重复请求
    debounce(fn, wait) {
      var timer = null;
      return function () {
        if (timer !== null) {
          clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
      };
    },
    handleScroll() {
      console.log('触发滚动事件');

      //客户端高度
      let clientH = document.documentElement.clientHeight;
      //body高度
      let bodyH = document.body.clientHeight;
      //滚动的高度
      let scrollTop = document.documentElement.scrollTop;
      //滚动到底部1100以内
      if (bodyH - clientH - scrollTop < 1100) {
        console.log('进入条件');

        if (this.end > this.movieList.length) {
          this.end = this.movieList.length;
        }
        if (this.start > this.movieList.length) {
          this.listEndCheck = true;
          return;
        }
        console.log('???');

        this.start += this.section;
        this.end += this.section;
        this.movies = this.movies.concat(
          this.movieList.slice(this.start, this.end)
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
html {
  font-size: 20px;
}
.changeColorNo {
  span {
    color: #1abc9c;
  }
  border: 1px solid #1abc9c;
  background: #fff;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.table {
  width: 80%;
  margin: 20vh auto;
}
ul {
  list-style: none;
}
.title {
  span {
    font-weight: 900;
    font-size: 1.2rem;
  }
}
h1 {
  text-align: center;
  padding-bottom: 20px;
}
ul {
  li {
    list-style: none;
    display: flex;
    font-size: 1rem;
    line-height: 3.5rem;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    // 使用 > 选择器方式污染elementUi的样式
    > span {
      padding: 15px;
      text-align: center;
      animation: display 0.5s linear;
      animation-iteration-count: 1;
      color: #555;
      width: 20%;
      display: block;
      font-weight: 500;
      border-right: 1px solid #dcdfe6;
    }
  }
  li > span:nth-child(1) {
    width: 4%;
  }
  li > span:nth-child(2) {
    width: 8%;
  }
  li > span:nth-child(4) {
    width: 28%;
  }
  li + li {
    border-top: none;
  }
  @keyframes display {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
#label:hover {
  color: #25bb9b;
}
span >>> .button {
  padding: 12px 32px;
}
span >>> .el-rate {
  line-height: 3.5rem;
}
input[type="checkbox"] {
  margin-right: 8%;
  appearance: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  position: relative;
  top: 3px;
}
input[type="checkbox"]:checked {
  border: 5px solid #1abc9c;
  background: #fff;
}
div >>> .dialog-body {
  padding: 0px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.dialog-body span {
  padding-left: 5px;
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2rem;
  display: block;
}
div >>> .el-slider {
  width: 67%;
  margin: 0 auto;
  margin-top: 15px;
  float: right;
}
div >>> .dialog-body::after {
  content: "";
  display: block; /*必须是块级元素*/
  clear: both;
}
.film-ratings {
  float: left;
}
.selected-all {
  cursor: pointer;
}
.selected-all:hover {
  color: #1abc9c;
  text-decoration: underline;
}
</style>
